<template>
    <div
            class="message-content message-content--bottom message-content--fixed
    message-content--arrowed Popover-content-enter-done"
            id="Popover21-content"
    >
        <span class="message-arrow message-arrow--bottom" style="left: 181px; top: 0px;"></span>
        <div class="Menu push-menu">
            <div class="push-content">
                <div class="push-list">
                    <!-- PushNotifications-item !-->
                    <div class="push-item">
            <span>
                <span class="PushNotifications-actor">
                    <a href="https://zhuanlan.zhihu.com/wnsouba">万能搜吧</a></span>
            </span>
                        &nbsp;新增了文章&nbsp;
                        <span>
                  <a href="https://zhuanlan.zhihu.com/p/68752662">
                  为对付喷子而生，这款插件挺管用</a>
              </span>
                    </div>
                </div>
                <div class="push-footer">
                    <a class="Button Button--plain">
                        <Icon type="md-settings"/>
                        设置</a>
                    <a class="Button Button--plain">查看全部通知</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PushNotice"
    };
</script>

<style scoped lang="scss">
    .message-content {
        position: absolute;
        background: #fff;
        border: 1px solid #ebebeb;
        border-radius: 4px;
        box-shadow: 0 5px 20px rgba(26, 26, 26, .1);
        z-index: 203;

        &--bottom, &--arrowed {
            margin-top: 16px;
        }

        &--fixed {
            position: fixed;
        }
    }

    .message-arrow {
        position: absolute;
        overflow: hidden;
        pointer-events: none;

        &--bottom {
            width: 32px;
            height: 16px;
            transform: translate(-50%, -100%);

            &:after {
                left: 50%;
                bottom: -8px;
            }
        }

        &:after {
            content: "";
            position: absolute;
            box-sizing: border-box;
            width: 24px;
            height: 24px;
            margin: -12px;
            border: 1px solid #ebebeb;
            background: #fff;
            transform: rotate(45deg);
            pointer-events: auto;
        }
    }

    .push-menu {
        width: 360px;
        padding: 0;
        overflow: hidden;
    }

    .push-list {
        height: 350px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .push-footer {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 40px;
        padding: 0 16px;
        line-height: 40px;
        background: #fff;
        border-top: 1px solid #ebebeb;
        box-sizing: border-box;
    }

    .push-item {
        position: relative;
        padding: 15px;
        font-size: 14px;
        line-height: 24px;
        color: #1a1a1a;
    }

    .Button {
        display: inline-block;
        padding: 0 16px;
        font-size: 14px;
        line-height: 32px;
        color: #8590a6;
        text-align: center;
        cursor: pointer;
        background: none;
        border: 1px solid;
        border-radius: 3px;
    }

    .Button--link, .Button--plain {
        height: auto;
        padding: 0;
        line-height: inherit;
        background-color: transparent;
        border: none;
        border-radius: 0
    }


</style>
